<template>
  <el-select v-bind="$attrs" v-model="mValue" :multiple="multiple">
    <template v-slot:default>
        <slot />
    </template>
  </el-select>
</template>

<script>
// 该组件主要是把el-select的多选时数组类型转成字符串类型
export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      mValue: undefined
    }
  },
  watch: {
    mValue (o) {
      if (o) {
        if (o instanceof Array) {
          this.$emit('change', o.join(','))
        } else {
          this.$emit('change', o)
        }
      }
    },
    value (o) {
      if (o && this.multiple) {
        this.mValue = o.split(',')
      }
    }
  },
  mounted () {
    if (this.mValue instanceof Array) {
      this.$emit('change', this.mValue.join(','))
    } else {
      this.$emit('change', this.mValue)
    }
    if (this.value && this.multiple) {
      this.mValue = this.value.split(',')
    }
  }
}
</script>

<style>

</style>
